<template>
  <header>
    <div class="left-content">
      <el-tooltip placement="right" effect="Dark" popper-class="testTooltip">
        <div slot="content" style="color:hsl(227, 31%, 65%);">点击导航栏<br/>展开/折叠</div>
        <el-button @click="handleMenu" plain icon="el-icon-menu"></el-button>
      </el-tooltip>
      <!-- <router-link class="to-login" to="/login">
         <el-button>登录</el-button>
      </router-link> -->
    </div>
    <div class="m-content">
      <input
        v-model="wd"
        @keyup="keyup($event)"
        @keydown="keydown($event)"
        type="text"
        class="control"
        placeholder="百度搜索"
      />
      <ul class="list-group">
        <li
          class="list-group-item"
          v-for="(item, index) in arr"
          :key="{ 'list-group-item-info': index == listIndex }"
          @click="click($event)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="right-content">
      <div class="name">PUPA/ONE---</div>
      <el-dropdown trigger="click" size="mini">
        <span>
          <img class="user" :src="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link class="to-Introduce" to="/Introduce">
             个人介绍
             </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link class="to-diary" to="/diary">
             个人日记
             </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default {
  name: "commonHeader",
  data() {
    return {
      userImg: require("../assets/image/user.png"),
      wd: "", //搜索的关键词
      arr: [], //用于储存关键词的搜索词条
      listIndex: -1, //设置初始索引，数组从0开始，因此初始成-1
    };
  },
  methods: {
    handleMenu() {   //handleMenu包括括号为一个新定义的方法
      this.$store.commit("collapseMenu"); //改变state中isCollapse的值，因为collapseMenu定义了取反方式，这里commit提交了这个方式，之后点击就可以实现展开或折叠导航栏了
    },
    //这个函数我们在input标签输入关键词的时候不断的给百度服务器发送请求获取搜索词条，并且不断的复制给data中的数组arr
    keyup(event) {
      //如果我按的是上下键，那么就不发送请求了
      console.log(event);
      if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
        return;
      var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
      this.$http
        .jsonp(url, {
          params: {
            wd: this.wd,
          },
          jsonp: "cb",
        })
        .then((res) => {
          console.log(res);
          this.arr = res.data.s; //把百度服务器返回的数据传给arr数组
        });
    },
    //监听鼠标的点击事件
    //如果鼠标点击某一行的文字，则点击事件中的event.explicitOriginalTarget.data代表关键词
    //如果点击某一行的空白处，则点击事件中的event.explicitOriginalTarget.innerText代表关键词
    //大家可以通过console.log(event)来查看关键词所在的位置
    click(event) {
      console.log(event);
      if (event.explicitOriginalTarget.data != undefined) {
        this.wd = event.explicitOriginalTarget.data;
        window.open("https://www.baidu.com/s?wd=" + this.wd);
      } else if (event.explicitOriginalTarget.innerText != undefined) {
        this.wd = event.explicitOriginalTarget.innerText;
        window.open("https://www.baidu.com/s?wd=" + this.wd);
      }
    },
    //监听键盘的事件
    //如果按down，则增加当前listIndex+1，因此arr[this.listIndex]就能代表当前的词条
    //我们通过对listIndex的修改来得到当前词条在arr中的索引，然后就可以得到词条的具体信息，然后发送请求了
    keydown(event) {
      console.log(event);
      //下键：40 上键：38
      if (event.keyCode == 38) {
        //按的上键
        this.listIndex--;
        if (this.listIndex < 0) {
          this.listIndex = this.arr.length - 1;
        }
        this.wd = this.arr[this.listIndex];
      } else if (event.keyCode == 40) {
        //说明你按的是下键
        this.listIndex++;
        if (this.listIndex > this.arr.length - 1) {
          this.listIndex = 0;
        }
        this.wd = this.arr[this.listIndex];
      } else if (event.keyCode == 13) {
        //如果你按的是enter，那么就跳转到百度搜索结果
        window.open("https://www.baidu.com/s?wd=" + this.wd);
      }
    },
  },
};
</script>

<style lang="less">
 //箭头
.el-tooltip__popper[x-placement^="right"] .popper__arrow {   
	border-right-color: white!important;
}
//箭头
.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {  
	border-right-color: white !important;
}
//内容
.testTooltip{  
	background: white !important;
}
</style>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.left-content {
  display: flex;
  .el-button {
    height: 60px;
    width: 63px;
    border: 1px solid hsl(227, 31%, 65%);
    color: #fff;
    background-color: hsl(227, 31%, 65%);
    border-radius: 0%;
  }
}
.m-content {
  .control {
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #c8cccf;
    color: #6a6f77;
    -web-kit-appearance: none;
    -moz-appearance: none;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    height: 36px;
    width: 400px;
  }
}

.right-content {
  display: flex;
  .name {
    margin-top: 15px;
    color: #fff;
    font-size: 20px;
  }
  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 20px 0 10px;
  }
}
</style>
